.badge {
	display: inline-block;
	border-radius: 1000px; // A number large enough to exceed height of any badge to make it look like a pill
	padding: $badge-padding-y $badge-padding-x;
	font-size: $font-body-small;
	line-height: 17px;
	height: 18px;
}

.badge--warning {
	color: var( --color-warning-80 );
	background-color: var( --color-warning-20 );
}

.badge--success {
	color: var( --color-text-inverted );
	background-color: var( --color-success );
}

.badge--info {
	color: var( --color-neutral-70 );
	background-color: var( --color-neutral-5 );
}

.badge--info-blue {
	background-color: var( --studio-blue-50 );
	color: var( --color-text-inverted );
}

.badge--error {
	background-color: var( --color-error );
	color: var( --color-text-inverted );
}
